<template>
	<div class="app-container home">
		<div class="first-row">
			<el-image :src="imgA" width="120" height="120" style="width: 120px; height: 120px"></el-image>
			<div class="login-info">
				<div>欢迎，{{ userStore.$state.name }}({{ userStore.$state.nickName }})</div>
				<div>用户组：{{ userStore.$state.roleName.join('、') }}</div>
				<div>上次登陆时间：{{ loginDate }}</div>
			</div>
			<!-- <div class="click-card" @click="linkQuestion">
				<svg-icon icon-class="wenti" style="width: 50px; height: 50px; position: relative; top: 15px; left: 35px" />
				<div style="text-align: center; position: relative; top: 20px">问题反馈</div>
			</div> -->
			<div class="click-card" v-if="userStore.$state.roles.includes('yw2')" @click="linkCustomer">
				<svg-icon icon-class="kehu" style="width: 50px; height: 50px; position: relative; top: 15px; left: 35px" />
				<div style="text-align: center; position: relative; top: 20px">添加客户</div>
			</div>
			<div class="click-card" v-if="userStore.$state.roles.includes('yw2')" @click="linkProject">
				<el-icon size="50" style="position: relative; top: 15px; left: 35px">
					<CirclePlusFilled />
				</el-icon>
				<div style="text-align: center; position: relative; top: 20px">添加项目</div>
			</div>
			<div class="click-card" v-if="userStore.$state.roles.includes('sj1')" @click="linkPrice">
				<svg-icon icon-class="yusuan"
					style="width: 50px; height: 50px; position: relative; top: 15px; left: 35px" />
				<div style="text-align: center; position: relative; top: 20px">添加报价</div>
			</div>
			<div class="second-row">
				<div style="margin-right: 20px" v-if="showper">
					<div class="header">
						<el-divider direction="vertical"
							style="border: 2px rgb(8, 165, 216) solid; height: 20px" /><svg-icon icon-class="jilu"
							style="position: relative; top: 1px" />商务数据
					</div>
					<div class="items">
						<div v-if="['yw2', 'yw1', 'jl', 'admin'].some((e) => userStore.$state.roles.includes(e))"
							class="item" @click="toCustomer">
							<div>{{ bussInfo.customerTotal }}</div>
							<div>客户</div>
						</div>
						<div class="item" @click="toProject('')">
							<div>{{ bussInfo.commonProject }}</div>
							<div>普通项目</div>
						</div>
						<div class="item" @click="toProject('1')">
							<div>{{ bussInfo.importantProject }}</div>
							<div>重要项目</div>
						</div>
					</div>
				</div>
				<div style="margin-right: 20px" v-if="showbuss">
					<div class="header">
						<el-divider direction="vertical"
							style="border: 2px rgb(8, 165, 216) solid; height: 20px" /><svg-icon icon-class="yusuan"
							style="position: relative; top: 1px" />{{ new Date().getFullYear() }}年我的销售数据
					</div>
					<div class="items">
						<div class="item">
							<div>{{ saleInfo.treatyTotalMoney }}</div>
							<div>合同金额</div>
						</div>
						<div class="item">
							<div>{{ saleInfo.invoicingMoney }}</div>
							<div>开票金额</div>
						</div>
						<div class="item" style="color: #f87f73; text-align: center">
							<div>{{ saleInfo.accountsMoney }}</div>
							<div>应收金额</div>
						</div>
					</div>
				</div>
			</div>
		</div>
		<div class="new-row"
			v-if="['jl', 'yw1', 'yw2', 'cw1', 'cw2', 'gc1', 'gc2', 'cg1', 'cg2'].some((e) => userStore.$state.roles.includes(e))">
			<div class="header">
				<svg-icon icon-class="system-erp"
					style="width: 18px; height: 18px; position: relative; margin-right: 10px" />信息列表
				<span style="float: right; margin-top: -8px">
					<el-button v-if="userStore.$state.roles.includes('jl') || userStore.$state.roles.includes('yw1')"
						@click="showList('1')">客户信息</el-button>
					<el-button v-if="userStore.$state.roles.includes('jl') || userStore.$state.roles.includes('yw1')"
						@click="showList('2')">项目信息</el-button>
					<el-button v-if="userStore.$state.roles.includes('gc1') || userStore.$state.roles.includes('gc2')"
						@click="showList('3')">工程信息汇总</el-button>
					<el-button v-if="userStore.$state.roles.includes('cg1') || userStore.$state.roles.includes('cg2')"
						@click="showList('4')">采购信息列表</el-button>
					<el-button v-if="userStore.$state.roles.includes('cw1') ||
						userStore.$state.roles.includes('cw2') ||
						userStore.$state.roles.includes('jl') ||
						userStore.$state.roles.includes('yw1')
						" @click="showList('5')">财务信息列表</el-button>
				</span>
			</div>
			<BaseTable v-if="showL == '1'" :columns="columnCus" :dataList="listCustomer" noSelection>
				<template #customerName="{ row }">
					<span style="cursor: pointer; color: #409eff" @click="toDetailS(row)">{{ row.customerName }}</span>
				</template>

				<template #flag="{ row }">
					<el-tag v-if="row.flag" class="ml-2">有</el-tag>
					<el-tag v-else class="ml-2" type="info">无</el-tag>
				</template>
				<template #isOpen="{ row }">
					<el-tag v-if="row.isOpen == '1'" class="ml-2">是</el-tag>
					<el-tag v-else class="ml-2" type="info">否</el-tag>
				</template>
			</BaseTable>
			<BaseTable v-if="showL == '2'" :columns="columnPro" :dataList="listProject" noSelection>
				<template #projectName="{ row }">
					<span style="cursor: pointer; color: #409eff" @click="toDetail(row)">{{ row.projectName }}</span>
				</template>
				<template #projectCode="{ row }">
					<span style="cursor: pointer; color: #409eff" @click="toDetailInfo(row)">{{ row.projectCode }}</span>
				</template>
			</BaseTable>
			<BaseTable v-if="showL == '3'" :columns="columnPross" :dataList="listPross" noSelection> </BaseTable>
			<BaseTable v-if="showL == '4'" :columns="columnWait" :dataList="listWait" noSelection> </BaseTable>
			<BaseTable v-if="showL == '5'" :columns="columnC" :dataList="listC" noSelection>
				<template #projectName="{ row }">
					<span style="cursor: pointer; color: #409eff" @click="toDetailC(row)">{{ row.projectName }}</span>
				</template>
			</BaseTable>
		</div>
		<div class="new-row" v-if="['jl', 'yw1', 'gc1', 'sj1'].some((e) => userStore.$state.roles.includes(e))">
			<div class="header">
				<svg-icon icon-class="system-erp"
					style="width: 18px; height: 18px; position: relative; margin-right: 10px" />审核列表
			</div>
			<BaseTable :columns="columnCheck" :dataList="listCheck" noSelection>
				<template #name="{ row }">
					<span style="cursor: pointer; color: #409eff" @click="toDetailCheck(row)">{{ row.name }}</span>
				</template>

				<template #types="{ row }">
					{{ row.types == 1 ? '项目' : row.types == 2 ? '合同' : '采购' }}
				</template>
				<template #status="{ row }">
					<dict-tag v-if="row.types == 1" :options="project_status" :value="row.projectStatus" />
					<dict-tag v-if="row.types == 2" :options="treaty_status"  :value="row.treatyStatus" />
					<dict-tag v-if="row.types == 3" :options="procure_status" :value="row.procureStatus" />
				</template>
			</BaseTable>

		</div>
		<div class="third-row">
			<div class="view-box" style="width: 48%">
				<div class="header">
					<svg-icon icon-class="system-erp"
						style="width: 18px; height: 18px; position: relative; top: 1px; margin-right: 10px" />项目动态
				</div>
				<el-table :data="tableData" height="250" style="width: 100%" @row-click="linkToLog"
					:row-style="tableHeaderColor">
					<el-table-column prop="projectCode" label="项目编号" width="220" />
					<el-table-column prop="projectName" label="项目名称" />
					<el-table-column prop="status" label="状态" width="180" />
				</el-table>
			</div>
			<div class="view-box" style="margin-left: 1%">
				<div class="header">
					<svg-icon icon-class="system-erp"
						style="width: 18px; height: 18px; position: relative; top: 1px; margin-right: 10px" />个人便签
				</div>
				<el-input v-model="textarea" :rows="10" type="textarea" style="margin-bottom: 15px" placeholder="" />
				<el-button type="primary" @click="updateNote">更新</el-button>（可记录一些文字备忘，限5000字）
			</div>
		</div>
	</div>
</template>

<script setup name="Index">
import useUserStore from '@/store/modules/user'
import {
	selectInfo,
	selectSale,
	selectbuss,
	updateUser,
	getList,
	getCustomers,
	getProjectCollect,
	getLatestProject,
	getWait,
	getC,
	getCheckList
} from '@/api/index/index'
import { getLabel } from '@/utils/getLabel'
import BaseTable from '@/components/BaseTable'
import { getConfigKey } from '@/api/system/config'
import { computed, onMounted } from 'vue'
const { proxy } = getCurrentInstance()

const { project_stage, project_category, project_status, is_important, procure_status, treaty_status } = proxy.useDict(
	'project_stage',
	'project_category',
	'project_status',
	'is_important',
	'procure_status',
	'treaty_status'
)

const router = useRouter()
const userStore = useUserStore()
const textarea = ref('')
const saleInfo = ref({})
const bussInfo = ref({})
const imgA = ref('')
const loginDate = ref('')
const userId = ref('')
const listCustomer = ref([])
const listPross = ref([])
const listProject = ref([])
const listWait = ref([])
const listC = ref([])
const listCheck = ref([])
getCustomers().then((res) => {
	if (res.data) listCustomer.value = res.data
})
getProjectCollect().then((res) => {
	if (res.data) listPross.value = res.data
})
getLatestProject().then((res) => {
	if (res.data) listProject.value = res.data
})
getWait().then((res) => {
	if (res.data) listWait.value = res.data
})
getC().then((res) => {
	if (res.data) listC.value = res.data
})
const toDetailS = (row) => {
	router.push({
		path: '/customer/customDetail',
		query: {
			id: row.customerId
		}
	})
}
const toDetail = (row) => {
	router.push({
		path: '/project/projectDetail',
		query: {
			id: row.projectId
		}
	})
}
const toDetailInfo = (row) => {
	router.push({
		path: '/project/information',
		query: { id: row.projectId }
	})
}
const toDetailC = (row) => {
	router.push({
		path: '/project/information',
		query: { id: row.projectId }
	})
}
const columnCus = ref([
	{ key: 1, label: `企业名称`, prop: 'customerName', type: 'custom', visible: true },
	{ key: 2, width: '90', label: `项目`, prop: 'flag', type: 'custom', visible: true },
	{ key: 3, width: '100', label: `是否公共库`, prop: 'isOpen', type: 'custom', visible: true },
	{ key: 5, width: '150', label: `录入时间`, prop: 'createTime', type: 'dateTime', visible: true },
	{ key: 6, width: '150', label: `更新时间`, prop: 'updateTime', type: 'dateTime', visible: true }
])
const columnPro = ref([
	{ key: 12, width: '90', label: `重要项目`, prop: 'isImportant', type: 'select', data: is_important, visible: true },
	{ key: 1, width: '90', label: `项目编号`, prop: 'projectCode', type: 'custom', visible: true },
	{ key: 2, width: '80', label: `分类`, prop: 'projectCategory', type: 'select', data: project_category, visible: true },
	{ key: 4, label: `项目名称`, minWidth: '300px', prop: 'projectName', type: 'custom', visible: true },
	{ key: 5, width: '150', label: `所属企业`, prop: 'customerName', type: 'text', visible: true },
	{ key: 6, width: '150', label: `合同（结算）金额`, prop: 'treatyMoney', type: 'text', visible: true },
	{ key: 7, width: '90', label: `阶段`, prop: 'projectStage', type: 'select', data: project_stage, visible: true },
	{ key: 8, width: '90', label: `负责人`, prop: 'nickName', type: 'text', visible: true },
	{ key: 3, width: '150', label: `录入时间`, prop: 'createTime', type: 'dateTime', visible: true },
	{ key: 9, width: '150', label: `更新时间`, prop: 'createTime', type: 'dateTime', visible: true },
	{ key: 10, width: '130', label: `状态`, prop: 'projectStatus', type: 'select', data: project_status, visible: true }
])
const columnPross = ref([
	{ key: 1, label: `项目名称`, prop: 'projectName', type: 'text', visible: true },
	{ key: 2, width: '150', label: `合同完工日期`, prop: 'progressFinishTime', type: 'dateTime', visible: true },
	{ key: 3, width: '150', label: `开工日期`, prop: 'progressstartTime', type: 'dateTime', visible: true },
	{ key: 4, width: '150', label: `验收日期`, prop: 'progressCheckTime', type: 'dateTime', visible: true },
	{ key: 5, width: '150', label: `审计日期`, prop: 'progressAuditTime', type: 'dateTime', visible: true },
	{ key: 6, width: '150', label: `尾款到期日期`, prop: 'progressCashTime', type: 'dateTime', visible: true },
	{ key: 7, width: '150', label: `保质期到期日期`, prop: 'progressWarrantyTime', type: 'dateTime', visible: true }
])
const columnWait = ref([
	{ key: 1, label: `采购单名称`, prop: 'procureName', type: 'text', visible: true },
	{ key: 2, width: '90', label: `项目编号`, prop: 'projectCode', type: 'text', visible: true },
	{ key: 3, width: '200', label: `状态`, prop: 'procureStatus', type: 'select', data: procure_status, visible: true },
	{ key: 5, width: '150', label: `审核时间`, prop: 'auditTime', type: 'dateTime', visible: true },
	{ key: 6, width: '150', label: `创建时间`, prop: 'createTime', type: 'dateTime', visible: true }
])
const columnC = ref([
	{ key: 1, label: `项目名称`, prop: 'projectName', type: 'custom', visible: true },
	{ key: 2, width: '150', label: `合同金额`, prop: 'treatyTotalMoney', type: 'text', visible: true },
	{ key: 3, width: '150', label: `应收金额`, prop: 'accountsMoney', type: 'text', visible: true },
	{ key: 4, width: '150', label: `开票金额`, prop: 'invoicingMoney', type: 'text', visible: true },
	{ key: 5, width: '150', label: `收款金额`, prop: 'collectionMoney', type: 'text', visible: true },
	{ key: 6, width: '150', label: `采购金额`, prop: 'procureMoney', type: 'text', visible: true }
])
const columnCheck = ref([
	{ key: 1, label: `名称`, prop: 'name', type: 'custom', visible: true },
	{ key: 2, width: '200', label: `类型`, prop: 'types', type: 'custom', visible: true },
	{ key: 3, width: '200', label: `状态`, prop: 'status', type: 'custom', visible: true }
])
selectInfo().then((res) => {
	textarea.value = res.data.user.notes
	loginDate.value = res.data.user.loginDate
	getConfigKey('sys.upload').then((response) => {
		imgA.value = response.msg + res.data.user.avatar
	})
	userId.value = res.data.user.userId
})
selectSale().then((res) => {
	saleInfo.value = res.data
})
getCheckList().then((res) => {
	listCheck.value = res.data
})
selectbuss().then((res) => {
	bussInfo.value = res.data
})
const tableHeaderColor = () => {
	return { cursor: 'pointer' }
}
const linkQuestion = () => {
	router.push({
		path: '/question/questionManage'
	})
}
const linkToLog = (row) => {
	router.push({
		path: '/project/projectDetail',
		query: { id: row.otherId }
	})
}
const tableData = ref([])
const showper = computed(() => {
	return ['jl', 'admin', 'yw1', 'sj1', 'sj2'].some((e) => userStore.$state.roles.includes(e))
})
const showbuss = computed(() => {
	return ['jl', 'admin', 'yw1', 'sj1', 'sj2'].some((e) => userStore.$state.roles.includes(e))
})
const showL = ref('')
const showList = (value) => {
	showL.value = value
}
onMounted(() => {
	if (userStore.$state.roles.includes('jl') || userStore.$state.roles.includes('yw1')) {
		showL.value = '1'
	} else if (userStore.$state.roles.includes('gc1') || userStore.$state.roles.includes('gc2')) {
		showL.value = '3'
	} else if (userStore.$state.roles.includes('cg1') || userStore.$state.roles.includes('cg2')) {
		showL.value = '4'
	} else if (userStore.$state.roles.includes('cw1') || userStore.$state.roles.includes('cw2')) {
		showL.value = '5'
	}
})
getList().then((res) => {
	tableData.value = res
})
const linkCustomer = () => {
	router.push({
		path: '/customer/customInfo'
	})
}
const linkProject = () => {
	router.push({
		path: '/project/projectManage'
	})
}
const linkPrice = () => {
	router.push({
		path: '/price/priceManage'
	})
}
const toCustomer = () => {
	router.push({
		path: '/customer/customerManage'
	})
}
const toProject = (status) => {
	router.push({
		path: '/project/projectManage',
		query: { isImportant: status }
	})
}
const toDetailCheck = (row) => {
	if (row.types == 1) {
		router.push({
			path: '/project/projectDetail',
			query: { id: row.id }
		})
	} else if (row.types == 2) {
		router.push({
			path: '/project/contractDetail',
			query: { id: row.id }
		})
	} else if (row.types == 3) {
		router.push({
			path: '/buy/buyDetail',
			query: { id: row.id }
		})
	}

}
const updateNote = () => {
	updateUser({ notes: textarea.value, userId: userId.value }).then((res) => {
		proxy.$modal.msgSuccess('修改成功！')
	})
}
</script>

<style scoped lang="scss">
.home {
	padding: 20px !important;
	background-color: rgba(255, 255, 255, 1);
	width: 100%;
	overflow: auto;
	color: rgb(101, 102, 100);
	margin-bottom: 0 !important;

	.first-row {
		width: 100%;
		height: 120px;
		display: flex;

		.login-info {
			width: 250px;
			height: 120px;
			line-height: 30px;
			font-weight: 600;
			font-size: 12px;
			margin: 0 15px;
		}

		.click-card {
			cursor: pointer;
			width: 120px;
			height: 120px;
			background-color: rgb(240, 240, 240);
			border-radius: 5px;
			margin-right: 10px;
		}
	}

	.new-row {
		width: 100%;
		margin-top: 40px;

		.header {
			height: 30px;
			line-height: 30px;
			font-size: 18px;
			font-weight: 600;
			border-bottom: 2px rgba(240, 240, 240, 1) solid;
			margin-bottom: 5px;
		}
	}

	.second-row {
		display: flex;

		.header {
			height: 30px;
			line-height: 30px;
			font-size: 18px;
			font-weight: 600;
			border-bottom: 2px rgba(240, 240, 240, 1) solid;
			margin-bottom: 5px;
		}

		.items {
			display: flex;

			.item {
				flex: 1;
				padding: 20px;
				border-right: 2px rgba(240, 240, 240, 1) solid;
				text-align: center;
				height: 100px;
				line-height: 30px;
				cursor: pointer;
				width: 140px;
			}

			.item:last-child {
				border-right: none;
			}
		}
	}

	.third-row {
		display: flex;
		margin-top: 20px;
		margin-bottom: 20px;

		.header {
			border-bottom: 2px rgba(240, 240, 240, 1) solid;
			margin-bottom: 10px;
			height: 30px;
			line-height: 30px;
		}

		.view-box {
			width: 49%;
		}
	}
}
</style>
